<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-control nzHasFeedback nzValidatingTip="正在验证..." [nzErrorTip]="userErrorTip">
      <nz-input-group nzPrefixIcon="user">
        <input type="text" nz-input formControlName="userName" 
          [placeholder]="'LOGIN.PLACEHOLD_USERNAME' | translate" />
          <ng-template #userErrorTip let-control>
              <ng-container *ngIf="control.hasError('required')">
                Please input your username!
              </ng-container>
              <ng-container *ngIf="control.hasError('duplicated')">
                Bob已经被占用啦！
              </ng-container>
          </ng-template>
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control nzHasFeedback [nzErrorTip]="passwordErrorTip">
      <nz-input-group nzPrefixIcon="lock">
        <input type="password" nz-input formControlName="password"
          [placeholder]="'LOGIN.PLACEHOLD_PASSWORD' | translate" />
      </nz-input-group>
      <ng-template #passwordErrorTip let-control>
        <ng-container *ngIf="control.hasError('required')">
          Please input your password!
        </ng-container>
        <ng-container *ngIf="control.hasError('minLengthError')">
          密码长度不得少于6位！
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control>
      <label nz-checkbox formControlName="remember">
        <span>{{'LOGIN.REMEMBER_ME' | translate}}</span>
      </label>
      <a class="login-form-forgot" class="login-form-forgot">{{'LOGIN.FORGET_PASSWORD' | translate}}</a>
      <button nz-button class="login-form-button" [nzType]="'primary'">{{'LOGIN.SUBMIT' | translate}}</button>
      {{'LOGIN.REGISTER_1' | translate}}
      <a>{{'LOGIN.REGISTER_2' | translate}}</a>
    </nz-form-control>
  </nz-form-item>
</form>
